import QtQuick 2.0

Item {
    id:powerRecy

    width: 180
    height: 20

    property int  currentPecrent: 100

    Rectangle{
        id:powerRect
        // anchors.horizontalCenter:  parent.horizontalCenter
        anchors.top:  parent.top
        anchors.right: parent.right
        anchors.rightMargin: 10
        width: 60
        height: 20
        radius: 5
        border.width: 3
        color: "#00000000"
        border.color: "#5CFFFFFF"
        Rectangle{
            id:powerProgress
            anchors.left: parent.left
            anchors.leftMargin: 3
            anchors.top: parent.top
            anchors.topMargin: 3
            width: currentPecrent * (powerRect.width - powerRect.border.width * 2 ) / 100
            visible: currentPecrent > 15 ?true:false
            height: 14
            color: "#FFFFFFFF"
            //            gradient: Gradient{
            //                GradientStop{position: 0.0;color: "green"}
            //                GradientStop{position: 1.0;color: "lightgreen"}
            //            }
        }

        Rectangle{
            id:powerRed
            anchors.left: parent.left
            anchors.leftMargin: 3
            anchors.top: parent.top
            anchors.topMargin: 3
            width:  currentPecrent * (powerRect.width - powerRect.border.width * 2 ) / 100
            visible: currentPecrent <= 15 ?true:false
            height: 14
            //            gradient: Gradient{
            //                GradientStop{position: 0.0;color: "#FF4500"}
            //                GradientStop{position: 1.0;color: "#FF7F50"}
            //            }
            color: "#FF4500"

        }


    }

    Text {
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.right:powerRect.right
        anchors.bottom: parent.bottom
        verticalAlignment:Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        font.pixelSize: 16

        height: parent.height
        color: currentPecrent <= 15 ? "#FF4500":"#FFFFFF"
        text: currentPecrent  +qsTr("%")
    }
    Rectangle{
        anchors.left: powerRect.right
        anchors.top: parent.top
        width: 6
        height: 6
        radius: 1
        anchors.topMargin: (parent.height - 6  )/ 2
        color: "#5CFFFFFF"

    }

}
